<template>
	<view class="main backColor-red" style="height:100%">
		<view class="box1">
			<view class="bigIconBox">
				<image alt="" class="img-bigIcon" src="/static/wyu.png"></image>
			</view>
		</view>
		<view class="box2">
			<view class="infoBox">
				<view class="oneInfoBox">
					<view class="oneInfoBox1"><text>学号：</text></view>
					<view class="oneInfoBox2"><input :value="account" @input="inputChange($event,'account')"
							class="uni-input" maxlength="10" type="number" placeholder="请输入学号" /></view>
				</view>
				<view class="split-line"></view>
				<view class="oneInfoBox">
					<view class="oneInfoBox1"><text>密码：</text></view>
					<view class="oneInfoBox2"> <input :value="pwd" @input="inputChange($event,'pwd')" class="uni-input"
							password type="text" placeholder="请输入密码" />
					</view>
				</view>
				<view class="split-line"></view>
				<view class="oneInfoBox">
					<view class="oneInfoBox1"><text>验证码：</text></view>
					<view class="oneInfoBox2"> <input :value="verifycode" @input="inputChange($event,'verifycode')"
							class="uni-input" maxlength="4" placeholder="请输入验证码" /></view>
					<view class="oneInfoBox3" @click="updateCodeSrc">
						<image class="yzm" :src="yzmCode"></image>
					</view>
				</view>
			</view>
			<view class="loginBox">
				<button :loading="loading" @click="login" type="warn" class="but-login " style="width:100%">登录</button>
			</view>
		</view>

	</view>

</template>

<script>
	import * as api from '@/devApi/loginWyu/index.js'
	export default {
		data() {
			return {
				verifycode: '',
				yzmCode: '',
				cookie: '',
				account: '',
				pwd: '',
				loading: false
			}
		},
		methods: {
			author() {
				uni.authorize({
					scope: 'scope.userInfo',
					success: () => {
						this.login()
					},
					fail: () => {
						uni.showModal({
							showCancel: false,
							title: '提示',
							content: '您已拒接授权，如需登录请先授权使用，请稍后再试重新授权。',
							success: function(res) {
								if (res.confirm) {
									console.log('用户点击确定');
								} else if (res.cancel) {
									console.log('用户点击取消');
								}
							}
						});
					}
				})
			},
			login() {
				if (this.account == '' || this.account.length == 0) {
					uni.showToast({
						title: '请输入学号',
						icon: 'error',
						duration: 850
					});
					return
				}
				if (this.pwd == '' || this.pwd.length == 0) {
					uni.showToast({
						title: '请输入密码',
						icon: 'error',
						duration: 850
					});
					return
				}
				if (this.verifycode == '' || this.verifycode.length == 0) {
					uni.showToast({
						title: '请输入验证码',
						icon: 'error',
						duration: 850
					});
					return
				}
				uni.getUserInfo({
					provider: 'weixin',
					success: (res) => {
						console.log('getUserInfo', res);
						uni.login({
							provider: 'weixin',
							onlyAuthorize: true,
							success: (loginRes) => {
								this.code = loginRes.code
								console.log('code', this.code);
								this.loading = true
								this.$nextTick(() => {
									this.loginWyu()
								})
							},
							fail(err) {
								this.loading = false
								console.log(err, 92);
							}
						});
					},
				})

			},
			loginWyu() {
				const data = {
					verifycode: this.verifycode,
					account: this.account,
					pwd: this.pwd
				}
				uni.request({
					withCredentials: true,
					header: {
						'content-type': 'application/x-www-form-urlencoded',
						cookie: 'JSESSIONID=' +
							this.cookie
					},
					url: 'https://jxgl.wyu.edu.cn/new/login', //仅为示例，并非真实接口地址。
					data: data,
					method: 'POST',
					success: (res) => {

						if (res.data.code == 0) {
							//正确
							//登录后台
							this.getLoginWyu()
							//存储用户账号密码
							uni.setStorage({
								key: 'account',
								data: this.account
							});
							uni.setStorage({
								key: 'pwd',
								data: this.pwd
							})
							return
						} else {
							//错误
							this.loading = false
							this.$errMessageToast(res.data.message)
							this.getCode()
						}

					},
					fail: (err) => {
						console.log(err.message);
						this.loading = false
						uni.showToast({
							title: '请求失败',
							icon: 'error',
							duration: 850
						});
					}
				});
			},
			async getLoginWyu() {
				uni.request({
					url: "http://120.24.52.197:9890/login/loginWyuSys",
					method: 'POST',
					data: JSON.stringify({
						code: this.code,
						token: 'JSESSIONID=' + this.cookie
					}),
					header: {
						'content-type': 'application/json',
					},
					success: (res) => {
						// 处理登录成功
						console.log(this.cookie.$errMessageToast90);
						this.loading = false
						const result = res.data
						console.log(res, 192);
						if (result.code != 200) {
							this.$errMessageToast(result.message)

							return
						}
						console.log(result, 125);
						uni.showToast({
							title: result.msg || '',
							icon: 'success',
							mask: true,
							duration: 1000
						});
						//存储token
						uni.setStorage({
							key: 'token',
							data: result.data.tokenValue
						})
						this.$updateToken(result.data.tokenValue)
						setTimeout(() => {
							this.back(result.data.tokenValue)
						}, 1200)
					},
					fail: (err) => {
						this.loading = false
						uni.showToast({
							title: err.msg || '服务器网络异常，请重试' || err.errMsg,
							duration: 850,
							icon: "error"
						})
					}
				})
				// const result = await api.getLogin()
			},
			updateCodeSrc() {
				this.getCode()
			},
			back(token) {

				// 1. 获取当前页面栈实例（此时最后一个元素为当前页）
				let pages = getCurrentPages()
				console.log(pages, 214);
				// 2. 上一页面实例
				// 注意是length长度，所以要想得到上一页面的实例需要 -2
				// 若要返回上上页面的实例就 -3，以此类推
				let prevPage = pages[pages.length - 2]

				// 3. 给上一页面实例绑定getValue()方法和参数（注意是$vm）
				prevPage.$vm.getValue(token)

				// 4. 返回上一页面
				uni.navigateBack({
					delta: 1 // 返回的页面数
				})

			},
			getCode() {
				uni.request({
					withCredentials: true,
					responseType: 'arraybuffer',
					url: 'https://jxgl.wyu.edu.cn/yzm', //仅为示例，并非真实接口地址。
					method: 'GET',
					success: (res) => {
						var data = {}
						var cookileNew = res.header['Set-Cookie'];
						console.log(cookileNew, 264);
						if (cookileNew != null && cookileNew.length > 0) {
							let oldcookileNew = cookileNew.substring(cookileNew.indexOf('JSESSIONID=') + 1,
								cookileNew
								.length);
							console.log(oldcookileNew, 269);
							cookileNew = oldcookileNew.substring(oldcookileNew.indexOf('=') + 1, oldcookileNew
								.indexOf(';'))
							console.log(cookileNew, 271);
							data.cookie = cookileNew

						}
						data.codeBase64 = `data:image/jpg;base64,` + uni.arrayBufferToBase64(res.data);
						console.log(data);

						this.yzmCode = data.codeBase64
						this.cookie = data.cookie
						console.log(this.cookie, 175);
					},
					fail: (err) => {
						console.log(err);
						this.$errMessageToast('获取验证码失败')

					}
				});
			},
			inputChange(e, type) {
				const value = e.detail.value
				switch (type) {
					case 'account':
						this.$nextTick(() => {
							this.account = value
						})
						break;
					case 'verifycode':
						this.$nextTick(() => {
							this.verifycode = value
						})
						break;
					case 'pwd':
						this.$nextTick(() => {
							this.pwd = value
						})
						break;
					default:
						break;
				}
			}
		},
		created() {
			console.log(this);
			uni.getStorage({
				key: 'account',
				success: (res) => {
					this.account = res.data
				}
			});
			uni.getStorage({
				key: 'pwd',
				success: (res) => {
					this.pwd = res.data
				}
			})
			this.getCode()
		}
	}
</script>

<style>
	/* pages/loginWyu/loginWyu.wxss */
	page {
		height: 100%;
		background-color: #fdfdfd;
	}

	.backColor-red {
		display: flex;
		flex-direction: column;
	}

	.box1 {
		width: 100%;
		height: 340upx;
		display: flex;
		align-items: center;

		background: #c72620;
	}

	.bigIconBox {
		width: 200upx;
		height: 200upx;
		margin: 0 auto;
	}

	.img-bigIcon {
		width: 200upx;
		height: 200upx;
		border-radius: 50%;
		/* box-shadow: 4px 4px 4px -4px #7c7c7e; */
	}

	.box2 {
		width: 100%;
		transform: translateY(-30upx);
		flex: 1;
		background-color: #FDFDFD;
		border-radius: 25px 25px 0 0;
		box-shadow: 0px -5px 3px -3px #820b0b;
		display: flex;
		flex-direction: column;
	}

	.infoBox {
		width: 726upx;
		margin: 36upx 12upx 0upx 12upx;
		background-color: #FAFAFA;
		border-radius: 15px;
		box-shadow: 0 8upx 10upx -9upx #7c7c7e;
	}

	.oneInfoBox {
		width: 726upx;
		height: 102upx;
		display: flex;
		flex-direction: row;
	}

	.oneInfoBox1 {
		width: 130upx;
		margin: auto 0;
		margin-left: 24upx;
	}

	.oneInfoBox2 {
		width: 386upx;
		height: 42upx;
		margin: auto 0;
	}

	.oneInfoBox3 {
		width: 152upx;
		height: 82upx;
		margin: auto 24upx auto 10upx;
	}

	.yzm {
		width: 152upx;
		height: 84upx;
		border-radius: 10upx;
	}

	.loginBox {
		width: 726upx;
		height: 102upx;
		margin: 36upx 12upx 0upx 12upx;
	}

	.but-login {
		height: 84upx;
		color: #FDFDFD;
		background-color: #c72620;
		border-radius: 10px;
	}
</style>
